import { createApp, h, render } from "vue";
import Message from "./Message.vue";
export type MessageType = "success" | "error" | "default";

const createMessage = (
  message: string,
  type: MessageType,
  timeout?: number,
  navigationMessage?: string // 跳转信息 如跳转到首页 需要根据倒计时信息来定前面加上 "x秒后"
) => {
  // h函数 返回一个”虚拟节点“，通常缩写为 VNode
  //       接收三个参数：type，props 和 children
  // 1. type —— String | Object | Function
  //    HTML 标签名、组件、异步组件或函数式组件，这里导入的是Message组件
  // 2. props —— Object
  //    对象，与我们将在模板中使用的 attribute、prop 和事件相对应。这里Message组件props有message和type
  // 3. children —— String | Array | Object
  //    子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象
  const messageVnode = h(Message, {
    message,
    timeout,
    navigationMessage,
    type
  });
  const mountNode = document.createElement("div");
  document.body.appendChild(mountNode);
  // 把虚拟节点渲染出来需要使用内置的render
  render(messageVnode, mountNode); // 在官方的文档中没有声明 在element-plus中研究出来的
  // messageInstance.mount(mountNode);
  // 需要在外部调用对应实例上的卸载方法
  const destory = () => {
    render(null, mountNode); // 卸载节点
    document.body.removeChild(mountNode);
  };
  timeout = timeout || 2000; // 设置message的默认值
  if (timeout) {
    setTimeout(() => {
      // // messageInstance.unmount();
      // render(null, mountNode); // 卸载节点
      // document.body.removeChild(mountNode);
      destory();
    }, timeout);
  }
  return {
    destory
  };
};

export default createMessage;
